<template>
  <div class="container">
    <mt-popup
      v-model="uploadSucceed"
      popup-transition="popup-fade">
      上传成功
    </mt-popup>
    <mt-popup
      v-model="uploadFailed"
      popup-transition="popup-fade">
      上传失败
    </mt-popup>
    <mt-header fixed title="行程编辑">
      <router-link :to="{name:'admin'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="post-box">
        <vue-core-image-upload
          compress="50"
          text="上传海报图片"
          inputOfFile="file"
          @imageuploaded="imageuploaded"
          :max-file-size="52428800"
          url="/api/file/upload" >
          <img :src="project.displayImgUrl" class="poster-photo" :class="{'success-img':uploadImg}"/>
        </vue-core-image-upload>
    </div>
    <div class="post-content">
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cells__title">
          <div class="weui-cell__hd"><label class="weui-label">主题：</label></div>
          <div class="weui-cell__bd">
            <input type="hidden" v-model="project.id">
            <input class="weui-input" type="text" placeholder="行程的名称标题" v-model="project.projectName">
          </div>
        </div>
      </div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">时间：</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="date" v-model="project.projectStartTime">
          </div>
        </div>
      </div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">至：</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="date" v-model="project.projectEndTime">
          </div>
        </div>
      </div>
      <div>
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__hd"><label class="weui-label">类别：</label></div>
        <div class="weui-cell__bd">
           <select class="weui-select"  @change="handleGetScenicOptions()" v-model="project.type">
              <option value="" disabled selected hidden>{{placeholderForScenicsZoneType}}</option>
              <option v-for="option in scenicTypeOptions" :value="option.scenicTypeId">{{option.scenicTypeName}}</option>
           </select>
        </div>
      </div>
        <div class="weui-cell weui-cells__title">
          <div class="weui-cell__hd"><label class="weui-label">地点：</label></div>
          <div class="weui-cell__bd">
            <v-select :placeholder="placeholder" multiple :options="scenicOptions" label="scenicZoneName" v-model="project.scenicZones"></v-select>
          </div>
        </div>
      </div>
    </div>
    <div class="post-content-des">
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="活动详情描述" rows="10" v-model="project.projectDesc"></textarea>
            <div class="weui-textarea-counter"><span>0</span>/200</div>
          </div>
        </div>
      </div>
    </div>
    <div class="post-content">
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <!-- 标题 -->
                <p class="weui-uploader__title">活动详情图片</p>
                <!-- 计数器样式 -->
                <div class="weui-uploader__info">0/2</div>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" v-for="imgitem in project.introImages">
                  <!-- 上传成功后的样式 -->
                  <li class="weui-uploader__file" v-if="imgitem.introImageUrl.length>0">
                     <img :src="imgitem.introImageUrl">
                     <span class="mark-rt bg-red" @click="deleteImage(imgitem.id,imgitem.introImageUrl)"><i class="fa fa-remove"></i></span>
                  </li>
                  <!-- 上传失败后的样式 -->
                  <li class="weui-uploader__file weui-uploader__file_status" v-if="imgitem.error">
                    <div class="weui-uploader__file-content weui-icon-warn">
                    </div>
                    <img src="../../assets/pic_160.png">
                  </li>
                  <!-- 正在上传的样式 -->
                  <!--<li class="weui-uploader__file weui-uploader__file_status"  v-if="imgitem.active || imgitem.progress !== '0.00'">
                    <div class="weui-uploader__file-content">50%</div>
                    <img src="../../assets/pic_160.png">
                  </li>-->
                </ul>
                <!-- 添加图片按钮（加号） -->
                <div class="weui-uploader__input-box">
                    <vue-core-image-upload
                      compress="50"
                      inputOfFile="file"
                      @imageuploaded="imgsuploaded"
                      text=""
                      :max-file-size="52428800"
                      url="/api/file/upload" >
                    </vue-core-image-upload>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <mt-button type="default" @click="this.deleteProject" size="large">删除</mt-button>
    </div>
    <div class="tourist_edit">
        <a class="weui-btn weui-btn_disabled weui-btn_warn" @click="this.handleSaveProject">发布</a>
    </div>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <div class="pages-popup">
        <mt-popup
          v-model="popupVisible"
          popup-transition="popup-fade"
          position="top"
          class="popup-save">
          <p>发布成功</p>
        </mt-popup>
      </div>
    </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import MtCell from "../../../node_modules/mint-ui/packages/cell/src/cell";
  import MtButton from "../../../node_modules/mint-ui/packages/button/src/button";
  import VueCoreImageUpload from '../../../node_modules/vue-core-image-upload/src/vue-core-image-upload.vue';
  import vSelect from 'vue-select';
  import MtPopup from "../../../node_modules/mint-ui/packages/popup/src/popup"

  export default{
    data (){
      return {
        uploadSucceed: false,
        uploadFailed: false,
        uploadImg: false,
        pageReq:{
          count:'',
          page:''
        },
        project: {
          'id':'',
          'projectName': '',
          'displayImgUrl': require('../../assets/uploadtip.png'),
          'projectStartTime':'',
          'projectEndTime':'',
          'projectDesc':'',
          'limitNumber':'',
          'introImages':[
            {
              'id':'',
              'introImageUrl':require('../../assets/detail-img-1.jpg'),
              'order':'',
              'active':false,
              'error':false
            }
          ],
          'type':'',
          'scenicZones': []
      },
      scenicTypeOptions: [],
      scenicOptions: [],
      placeholderForScenicsZoneType:'线路类别',
      placeholder:"行程的地点",
      popupVisible:false,
      sheetVisible: false,
      actions: [{
        name: '确认删除',
        method: this.confirmDelete
        }]
      }
    },
    components: {
      'vue-core-image-upload': VueCoreImageUpload,
      'v-select': vSelect
    },
    created(){
      this.handleGetScenicTypeOptions();
      this.handleGetScenicOptions();
      this.handleGetProject();
    },
    computed:{
    },
    methods:{
      handleGetProject(){
        this.touristId = this.$route.params.touristId;
        fetch('/api/project/info/' +this.touristId ).then(response =>{
          if(response.data.success) {
            this.project = response.data.response;
            this.uploadImg = true;
          }
        })
      },
      imageuploaded (res) {
        if (res.success) {
          this.uploadSucceed = true;
          this.uploadImg=true;
          this.project.displayImgUrl = res.response;
        } else{
          this.uploadFailed = true;
        }
      },
      imgsuploaded(res){
        if (res.success) {
           this.project.introImages.push({introImageUrl:res.response,order:'',active:true,error:false});
        }
      },
      handleSaveProject(){
        let formData = JSON.stringify(this.project)
        fetch.post('/api/project/save',formData).then(response =>{
          if(response.data.success){
            this.touristList = response.data.response;
            this.popupVisible = true;
          }
        })
      },
      handleGetScenicTypeOptions(){
          this.scenicTypeOptions.push({scenicTypeId:0,scenicTypeName:'红色路线'});
          this.scenicTypeOptions.push({scenicTypeId:1,scenicTypeName:'场馆'});
      },
      handleGetScenicOptions(){
        this.project.scenicZones = [];
        this.scenicOptions = [];
        this.pageReq.count = 999;
        this.pageReq.page = 0;
        this.pageReq.type = this.project.type;
        let formData = JSON.stringify(this.pageReq)
        fetch.post('/api/scenic/list',formData).then(response =>{
          if(response.data.success){
            var i;
            for(i = 0; i < response.data.response.length; i++){
              let optionItem = new Object();
              optionItem.scenicId = response.data.response[i].id;
              optionItem.scenicZoneName = response.data.response[i].scenicZoneName;
              this.scenicOptions.push(optionItem);
            }
          }
        })
      },
      deleteProject(){
        this.sheetVisible = true;
      },
      confirmDelete(){
        fetch.delete('/api/project/delete/'+this.project.id).then(response =>{
            if(response.data.success){
              this.$router.replace({path: '/home/admin'})
            }
        })
      },
      deleteImage(imageId, imageUrl){
        fetch.put('/api/project/introimage/' +imageId ).then(response =>{
          var i;
          for(i = 0; i < this.project.introImages.length; i++){
            if(this.project.introImages[i].introImageUrl == imageUrl){
              this.project.introImages.splice(i,1);
            }
          }
        })
      }
    },

    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../../static/css/weui.css';
  @import '../../base/css/_base';
  .container{
    background-color: #fff;
    height: 100%;
    .mint-header {
        font-size: 16px;
        height: 45px;
        line-height: 45px;
        background-color: #f2f2f2 !important;
        box-sizing: border-box;
        color: #101010;
    }
     .post-box{
        margin-top: 45px;
        width: 100%;
        height: 216px;
        background-color: #E5E5E5;
        .g-core-image-upload-btn{
          width: 100%;
          height: 100%;
          text-align: center;
          vertical-align: middle;
          line-height: 216px;
          color: #F15F5C;
          img{
              width: 80px;
              height: auto;
              display: inline-block;
              vertical-align: middle;
          }
          img.poster-photo.success-img {
              width: 100% !important;
              height: 100%!important;
          }
        }
     }
      .post-content{
        padding: 0 18px;
        .weui-uploader__input-box .g-core-image-upload-btn{
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            z-index: 100;
        }
      }
      .post-content-des{
        background-color:#f2f2f2;
      }
      .weui-cells{
        margin-top: 0;
        line-height: 17px;
      }
      .weui-cells:before{
        border: 0;
      }
      .weui-cell{
        padding: 10px 0px;
      }
      .post-content-des .weui-cell{
        background-color: #f2f2f2;
      }
      .post-content-des .weui-cell .weui-cell__bd{
        background-color: #fff;
      }
    .weui-cells__title{
      margin: 0;
      padding: 19px 0;
    }
    .weui-label {
        width: auto;
        font-size: 14px;
        color: #101010;
        padding-left: 7px;
    }
      .weui-cells_form input,.weui-select{
        font-size: 14px;
        color: #888888;
      }
      .weui-select{
          height: auto;
          line-height: 1.42857143;
          padding: 5px 0 5px 7px;
          border: 1px solid rgba(60,60,60,.26);
          border-radius: 4px;
      }
      .weui-cell_select .weui-cell__bd:after{
          border-width: 0 3px 3px 0;
          border-color: rgba(60,60,60,.5);
          height: 7px;
          width: 7px;
          right: 10px;

      }
    .weui-btn{
        background-color: #F15F5C;
        border-radius: 0;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
    }
     .border-bottom{
          background-image: -webkit-linear-gradient(bottom, #e5e5e5, #e5e5e5 50%, transparent 50%);
          background-size: 100% 1px;
          background-repeat: no-repeat;
           background-position: bottom;
     }
      .weui-textarea,.weui-textarea-counter{
        font-size: 14px;
        color: #888888;
        padding: 10px 15px;
        word-break: break-word;
        box-sizing: border-box;
      }
      .weui-uploader__title{
        color: #101010;
        font-size: 14px
      }
       .weui-uploader__info{
          font-size: 14px;
          color: #888888;
       }
       .weui-uploader__files{
          .weui-uploader__file{
            position: relative;
          }
          img{
            float: left;
            margin-right: 9px;
            margin-bottom: 9px;
            width: 79px;
            height: 79px;
          }
          .mark-rt{
            border-radius: 4px;
            top: 0;
            color: #fff;
            font-size: 12px;
            height: 12px;
            line-height: 12px;
            position: absolute;
            right: 0;
            text-align: center;
            padding: 5px;
          }
          .mark-rt:hover{
            padding: 10px;
            font-size: 14px;
          }
          .bg-red {
              background-color: #F15F5C;;
          }
       }
    .poster-photo{
      width: 300px;
      height: 164px;
      border-radius: 6px;
    }
    .pages-popup{
      .popup-save{
        width: 100%;
        height: 45px;
        text-align: center;
        background-color: rgba(0,0,0,.4);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        p{
          line-height: 45px;
          color: #fff;
          font-size:16px;
        }
      }
    }
      a:link{text-decoration:none;}
      a:visited{text-decoration:none;}
      a:hover{text-decoration:none;}
      a:active{text-decoration:none;}
      .eclipse{
        display: -webkit-box;
        text-overflow:ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 1.2;
      }
  }

</style>
